<!DOCTYPE html>
<html class="">
<head>
<meta charset=utf-8 />
<title>Furatto :: Basic Setup</title>
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/furatto.css" />
<link rel="stylesheet" href="assets/css/font-awesome.css" />
<link rel="stylesheet" href="assets/css/examples.css" />
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head>
<body>

<div class="panels ">
  <div class="panel panel-left">
  </div>
</div>

<div class="panel-content">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner docs-navbar-inner">
      <div class="container">
        <a href="#menu" class="menu-trigger meteocon" data-meteocon="M" data-toggle="panel" data-target="#menu"></a>
        <div class="nav-collapse collapse">
          <nav id="menu">
            <ul class="nav docs-navbar-menu">
              <li><a class="brand" href="index.html">Project Name</a></li>
              <li class="active"><a href="#">About</a></li>
              <li class=""><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
            <div class="swiper-container">
            <a href="#" class="swiper-control left visible-lg">
              <i class="arrow-left icon-angle-left"></i> 
            </a>
            <a href="#" class="swiper-control right visible-lg">
              <i class="arrow-right icon-angle-right"></i>
            </a>
            <div class="swiper-wrapper">
                <!--First Slide-->
                <div class="swiper-slide bg-primary"> 
                  <!-- Any HTML content of the first slide goes here -->
                  <h1 class="swiper-header">Header 1</h1>
                  <p class="swiper-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a href="#" class="btn btn-alpha btn-large">Call to action</a>
                </div>
                <div class="swiper-slide bg-funky"> 
                  <!-- Any HTML content of the first slide goes here -->
                  <h1 class="swiper-header">Header 1</h1>
                  <p class="swiper-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a href="#" class="btn btn-funky btn-alpha btn-large">Call to action</a>
                </div>
                <div class="swiper-slide bg-danger"> 
                  <!-- Any HTML content of the first slide goes here -->
                  <h1 class="swiper-header">Header 1</h1>
                  <p class="swiper-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a href="#" class="btn btn-danger btn-alpha btn-large">Call to action</a>
                </div>
                
                <!--Etc..-->
            </div>
            <div class="swiper-pagination"></div>
          </div>

          <div class="container-center">
            <div class="row">
              <div class="carousel-steps-container">
               <div class="col-4 carousel-step">
                <img src="http://placehold.it/150x150" alt="" class="img img-circular" />  
                <h3 class="muted">Header</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#" class="btn btn-large btn-success">Read more</a>
               </div>
               <div class="col-4 carousel-step">
                <img src="http://placehold.it/150x150" alt="" class="img img-circular" />  
                <h3 class="muted">Header</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#" class="btn btn-large btn-success">Read more</a>
               </div>
               <div class="col-4 carousel-step">
                <img src="http://placehold.it/150x150" alt="" class="img img-circular" />  
                <h3 class="muted">Header</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#" class="btn btn-large btn-success">Read more</a>
               </div>
              </div>
              <hr />
            </div>

            <div class="features">
              <div class="row">
                 <div class="col-6">
                  <h1 class="muted">This feature is a killer one</h1>  
                  <p class="feature-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
                 <div class="col-6">
                   <img src="http://placehold.it/500x500" alt="" class="img img-well"/>
                 </div>
              </div>
              <div class="row">
                 <div class="col-6">
                   <img src="http://placehold.it/500x500" alt="" class="img img-well"/>
                 </div>
                 <div class="col-6">
                  <h1 class="muted">This feature is a killer one</h1>  
                  <p class="feature-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
              </div>
              <div class="row">
                 <div class="col-6">
                  <h1 class="muted">This feature is a killer one</h1>  
                  <p class="feature-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
                 <div class="col-6">
                   <img src="http://placehold.it/500x500" alt="" class="img img-well"/>
                 </div>
              </div>
            </div>
          </div>
<hr />
  <div class="row footer">
  <p class="copyright">Copyright <a href="#" class="docs-license">Company Name</a></p>
  <ul class="inline">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  </div>
</div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-32608013-3', 'icalialabs.github.io');
    ga('send', 'pageview');

  </script>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/furatto.min.js"></script>
</body>
</html>
